'use strict';
import React from 'react';
import { StyleSheet, Text, FlatList,View,Image,} from 'react-native';
import {Flex,Grid ,List,Accordion} from 'antd-mobile'

let treedata = [];
export default class NextScreen extends React.Component {
    constructor(props){
        super(props);
        this.state = {
                arrow:"down",
                isShow : false,
                treeData : [
                        {
                            key:"tree",
                            title:"tree",
                            child:[]
                        }
                    ]
        };
        treedata = this.state.treeData;
    }

    static navigationOptions = {
        title: 'this is NEXTPage',
    };
    onPressTitle(key){
        console.log(key);
    }
    onClick(item){
        if(this.state.arrow == "up"){
            this.setState({
                isShow:!this.state.isShow,
                arrow : "down"
            });
        }else{
            this.setState({
                isShow:!this.state.isShow,
                arrow : "up"
            });
        }
    }
    renderTreeNodes(treeNodes){
        return treeNodes.map((item) => {
            if (item.children.length > 0) {
                return (
                    <List.Item arrow="up"  onClick={() => this.onClick(item)}>
                        {item.title}
                        <List  style={{padding: 1}}>
                            <List.Item>{this.renderTreeNodes(item.children)}</List.Item>
                        </List>
                    </List.Item>
                );
            }else{
                return (
                    <List>
                        <List.Item arrow="down" onClick={() => {}}>{item.title}</List.Item>
                    </List>
                )
            }

        });
    }
    render() {
        const data1 = Array.from(new Array(9)).map((_val,i) => ({
            icon: 'https://gw.alipayobjects.com/zos/rmsportal/WXoqXTHrSnRcUwEaQgXJ.png',
            text: `name${i}`,
        }));
        return (
            <View style={styles.container}>
                <Flex  style={{justifyContent: 'flex-start',}} align="start">
                    <Flex.Item style={{flex:2,justifyContent: 'flex-start',}}>
                        {/*<MyTree item={this.state.data} onClick = {e=>this.getChildren()}/>*/}
                        <View style={{padding: 10}}>
                            {/*{this.renderTreeNodes(this.state.treeData)}*/}

                            <List>
                                <List.Item arrow={this.state.arrow} onClick={e => this.onClick(e)}>
                                    <Text>Country</Text>
                                </List.Item>
                                {this.getMyNode(this.state.isShow)}
                                <List.Item arrow="down">
                                    <Text>Counstorm</Text>
                                </List.Item>
                                <List.Item>
                                    <Text>Counstorm</Text>
                                </List.Item>
                            </List>
                        </View>

                    </Flex.Item>
                    <Flex.Item style={{flex:5,justifyContent: 'flex-start',}} >
                        <Text>this is RightView</Text>
                        <Grid data={data1}
                              columnNum={3}
                              hasLine={false}
                              renderItem={dataItem => (
                                  <View style={{justifyContent: 'center',
                                      alignItems: 'center', padding: 20 }}>
                                      <Image  source={{uri:dataItem.icon}} style={{ width: 50, height: 50 }} alt="icon" />
                                      <Text style={{ color: '#888', fontSize: 14, marginTop: 14 }}>
                                          <Text>{dataItem.text}</Text>
                                      </Text>
                                  </View>
                              )}
                        />
                    </Flex.Item>
                </Flex>

            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        padding: 15,
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
    sectionHeader: {
    paddingTop: 2,
        paddingLeft: 10,
        paddingRight: 10,
        paddingBottom: 2,
        fontSize: 14,
        fontWeight: 'bold',
        backgroundColor: 'rgba(247,247,247,1.0)',
},
item: {
    padding: 10,
        fontSize: 18,
        height: 44,
},
});